<!--日期，没有ID-->
<!--:style="styleWidth[controlType]"-->
<template>
  <el-date-picker
    ref="domDate"
    v-model="value"
    v-bind="$attrs"
    :type="EControlType[meta.controlType]"
    :name="'c' + meta.columnId"
    :format="myformat"
    :value-format="myvalueFormat"
    :clearable="clearable"
  >
  </el-date-picker>
</template>

<script setup lang="ts" generic="T extends object">
  import { computed, watch } from 'vue'
  import type { IFormChildProps } from '../map'
  import { itemController, EControlType } from '../map'
  import type { Ref } from 'vue'
  
  defineOptions({
    name: 'el-from-item-date-picker',
    inheritAttrs: false,
  })

  // 类型的字典
  const dateType = {
    120: 'date',
    121: 'datetime',
    122: 'month',
    123: 'week',
    124: 'year',
    125: 'daterange',
    126: 'datetimerange',
    127: 'monthrange',
    128: 'dates'
  }

  // 宽度的字典
  const styleWidth = {
    120: 'width:120px;', // 'date',
    121: 'width:165px;', // 'datetime',
    122: 'width:120px;', // 'month',
    123: 'width:120px;', // 'week',
    124: 'width:120px;', // 'year',
    125: 'width:220px;', // 'daterange',
    126: 'width:220px;', // 'datetimerange',
    127: 'width:220px;', // 'monthrange',
    128: 'width:220px;', // 'dates'
  }

  // 根据类型设置默认格式化
  const dateProps = {
    120: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD'},
    121: { format: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss'},
    122: { format: 'YYYY-MM', valueFormat: 'YYYY-MM'},
    123: { format: 'gggg-ww', valueFormat: 'gggg-ww'},
    124: { format: 'YYYY', valueFormat: 'YYYY'},
    125: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD'},
    126: { format: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss'},
    127: { format: 'YYYY-MM', valueFormat: 'YYYY-MM'},
    128: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD'}
  }
  
  
  const props = withDefaults(defineProps<IFormChildProps<T> & {
    format?: string,
    valueFormat?: string
  }>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.date
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true
  })

  const { value } = itemController(props )

  // 设置默认的格式化
  const myformat = computed(() => {
    if (props.format !== '') {
      return props.format
    } else {
      return dateProps[(props.meta.controlType as number)].format
    }
  })
  const myvalueFormat = computed(() => {
    switch(props.valueFormat){
      case undefined:
      case '': // 根据详细类型返回默认格式化
        return dateProps[(props.meta.controlType as number)].valueFormat
      case 'date': // 返回日期类型
        return undefined
      default: // 返回设置的格式化
        return props.valueFormat
    }
    
  })

  watch(() => props.meta.controlType, (val1: any, val2: any) => {
    // 新值类型
    if (val1 > 124 ) {
      // 新值是数组类型
      if (val2 < 125) {
        // 原值是字符串，需要变成数组
        value.value = []
      }
    } else {
      // 新值是字符串，
      if (val2 > 124) {
        // 原值是数组，需要变成字符串
        (value as Ref).value = null
      }
    }
  })

</script>
